<template>
  <!-- 公告栏 -->
  <div class="notice">
    <myheader title="公共栏" rightBtn="发布公告" @updataInfo="goHome"></myheader>

    <!-- 搜索栏 -->
    <div class="serarch">
      <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词" @search="onSearch" />
    </div>

    <div v-if="!empty">
      <notice_title_box v-for="(item,index) in notice" :key="index" @click="goDetali(item.id)">
        <template v-slot:notice_a>
          <div class="title">{{item.title}}</div>
          <div
            class="date"
            v-if="item.user"
          >{{item.user.username}} 发布于 &nbsp; {{formatDateTime(item.createTime)}}</div>
        </template>
      </notice_title_box>
    </div>
    <van-empty v-else image="error" description="暂无此内容！" />

    <p style="font-size:0.45rem;padding:15px 15px 30px 15px; ">
      智慧小巷的所有支付统一为支付宝沙箱支付，如有注册沙箱支付，可直接支付。仅供测试使用的沙箱账号为：
      <br />
      <span>{{account}}</span>
      <van-tag
        style=" float:right;"
        type="success"
        class="cobyOrderSn1"
        :data-clipboard-text="account"
        @click="copys1"
      >复制账号</van-tag>
      <br />支付密码为：
      <span>{{pwd}}</span>
      <van-tag
        style=" float:right;"
        type="success"
        class="cobyOrderSn2"
        :data-clipboard-text="pwd"
        @click="copys2"
      >复制密码</van-tag>
    </p>
  </div>
</template>

<script>
import myheader from '../comon/myheader.vue'
import notice_title_box from '../comon/notice_title_box.vue'
import formatDateTime from '../utils/data'
import { copy } from '../utils/tools'
export default {
  components: {
    myheader,
    notice_title_box,
  },
  data() {
    return {
      notice: [],
      current: 1,
      pages: 2,
      empty: false,
      searchValue: '',
      pwd: '111111',
      account: 'nwnppd2252@sandbox.com',
    }
  },
  created() {
    this.init()
  },
  methods: {
    copys1() {
      copy('.cobyOrderSn1')
    },
    copys2() {
      copy('.cobyOrderSn2')
    },
    formatDateTime(val) {
      return formatDateTime.formatDateTime4(val)
    },

    async init() {
      const res = await this.$axios.get('/notice/list')
      if (res.data.code == 200) {
        this.notice = res.data.data.records
        this.pageCount = res.data.data.pages
        this.current = res.data.data.current
        if (res.data.data.total == 0) {
          this.empty = true
        } else {
          this.empty = false
        }
      }
    },
    // 搜索
    async onSearch() {
      const res = await this.$axios.get(
        '/notice/list?title=' + this.searchValue
      )
      if (res.data.code == 200) {
        this.notice = res.data.data.records
        this.pageCount = res.data.data.pages
        this.current = res.data.data.current
        this.searchValue = ''
        if (res.data.data.total == 0) {
          this.empty = true
        } else {
          this.empty = false
        }
      }
    },
    goDetali(id) {
      this.$router.push('/noticeOne/' + id)
    },
    goHome() {
      this.$router.push('/addNotic')
    },
  },
}
</script>

<style scoped>
.header {
  position: fixed;
  width: 100%;
  padding: 0 !important;
  top: 0;
  z-index: 999;
}
.notice {
  margin-top: 46px;
  margin-bottom: 35px;
}
.title {
  width: 100%;
  font-size: 16px;
  color: #000000;
}
.date {
  margin-top: 10px;
  font-size: 12px;
  color: #000000;
}
</style>
